<template>
  <div>
    <div class="barHeader">试试改变浏览器窗口大小</div>
    <div class="barCompareContainer">
        <!--月度同比-->
        <div class="compareItem">
            <h3>全省能耗月度同比</h3>
            <div class="barPosition">
                月份:
                <el-date-picker
                    v-model="IncreaseValue"
                    type="month"
                    size="mini"
                    value-format="MM"
                    format="MM"
                    style="width:100px"
                    @change="compareTime($event, 1)"
                    placeholder="选择年月">
                </el-date-picker>
            </div>
            <div style="height:360px" id="increase"></div>
        </div>

        <!--月度环比-->
        <div class="compareItem">
          <h3>全省能耗月度环比</h3>
          <div class="barPosition">
              月份:
              <el-date-picker
                  v-model="MomentsValue"
                  type="month"
                  size="mini"
                  value-format="yyyy-MM"
                  format="yyyy-MM"
                  style="width:120px"
                  @change="compareTime($event, 2)"
                  placeholder="选择月">
              </el-date-picker>
          </div>
          <div style="height:360px" id="monthMoments"></div>
        </div>

        <!--年度环比-->
        <div class="compareItem">
          <h3>全省能耗年度环比</h3>
          <div class="barPosition">
              月份:
              <el-date-picker
                  v-model="yearValue"
                  type="year"
                  size="mini"
                  value-format="yyyy"
                  format="yyyy"
                  style="width:120px"
                  @change="compareTime($event, 3)"
                  placeholder="选择年">
              </el-date-picker>
          </div>
          <div style="height:360px" id="yearMoments"></div>
        </div>

        <!--企业单耗对比-->
        <div class="compareItem">
          <h3>企业单耗对比</h3>
          <div class="companybarPosition">
              <div class="">
                A企业:
                <el-select v-model="companyA" size="mini" @change="compareCompany($event, 1)" placeholder="请选择">
                   <el-option
                     v-for="item in options"
                     :key="item.value"
                     :label="item.label"
                     :value="item.value">
                   </el-option>
                 </el-select>
              </div>
              <div class="">
                B企业:
                <el-select v-model="companyB" size="mini" @change="compareCompany($event, 1)" placeholder="请选择">
                   <el-option
                     v-for="item in options"
                     :key="item.value"
                     :label="item.label"
                     :value="item.value">
                   </el-option>
                 </el-select>
              </div>
          </div>
          <div style="height:330px" id="company"></div>
        </div>

        <!--行业万元能耗分析-->
        <div class="compareItem">
          <h3>行业万元能耗分析</h3>
          <div class="barPosition">
              行业:
              <el-select v-model="industryValue" style="width:140px" size="mini" @change="compareCompany($event, 2)" placeholder="请选择">
                 <el-option
                   v-for="item in options"
                   :key="item.value"
                   :label="item.label"
                   :value="item.value">
                 </el-option>
               </el-select>
          </div>
          <div style="height:360px" id="industry"></div>
        </div>

        <!--企业行业对比-->
        <div class="compareItem">
          <h3>企业行业对比</h3>
          <div class="barPosition">
              企业:
              <el-select v-model="conpanyIndustryValue" style="width:140px" size="mini" @change="compareCompany($event, 3)" placeholder="请选择">
                 <el-option
                   v-for="item in options"
                   :key="item.value"
                   :label="item.label"
                   :value="item.value">
                 </el-option>
               </el-select>
          </div>
          <div style="height:360px" id="conpanyIndustry"></div>
        </div>
        <div class="compareItem"></div>
        <div class="compareItem"></div>
    </div>
  </div>
</template>
<script>
let echarts = require('echarts/lib/echarts')
// 引入柱状图组件
require('echarts/lib/chart/bar')
export default {
  data () {
    return {
      visible: false,
      IncreaseValue: '',
      MomentsValue: '',
      yearValue: '',
      companyA: '',
      companyB: '',
      industryValue: '',
      conpanyIndustryValue: '',
      options: [{
        value: '选项1',
        label: '黄金糕'
      }, {
        value: '选项2',
        label: '双皮奶'
      }, {
        value: '选项3',
        label: '蚵仔煎'
      }, {
        value: '选项4',
        label: '龙须面'
      }, {
        value: '选项5',
        label: '北京烤鸭'
      }]
    }
  },
  created () {
    this.TIME = ['increase', 'monthMoments', 'yearMoments']
    this.COMPANY = ['company', 'industry', 'conpanyIndustry']
    this.compareTime(this.IncreaseValue, 1)
    this.compareTime(this.MomentsValue, 2)
    this.compareTime(this.yearValue, 3)
    this.compareCompany(this.companyA, 1)
    this.compareCompany(this.companyB, 1)
    this.compareCompany(this.industryValue, 2)
    this.compareCompany(this.conpanyIndustryValue, 3)
  },
  mounted () {
    this.darw('increase', this.increase.xData, this.increase.yData, '年', 0)
    this.darw('monthMoments', this.monthMoments.xData, this.monthMoments.yData, '月', 0)
    this.darw('yearMoments', this.yearMoments.xData, this.yearMoments.yData, '年', 0)
    this.darw('company', this.company.xData, this.company.yData, '企业', 1)
    this.darw('industry', this.industry.xData, this.industry.yData, '', 1)
    this.darw('conpanyIndustry', this.conpanyIndustry.xData, this.conpanyIndustry.yData, '', 2)
  },
  methods: {
    compareTime (val, type) {
      let that = this
      this[this.TIME[type - 1]] = {
        xData: [],
        yData: []
      }

      let s = [{'monthOrYear': '2018-05', 'value': '80.7'},
        {'monthOrYear': '2019-05', 'value': '90'},
        {'monthOrYear': '2016-05', 'value': '60'}
      ]

      s.sort(function (a, b) {
        if (a.monthOrYear.split('-')[0] === b.monthOrYear.split('-')[0]) {
          return a.monthOrYear.split('-')[1] - b.monthOrYear.split('-')[1]
        }
        return a.monthOrYear.split('-')[0] - b.monthOrYear.split('-')[0]
      })

      s.forEach(function (item) {
        that[that.TIME[type - 1]].xData.push(item.monthOrYear)
        that[that.TIME[type - 1]].yData.push(item.value)
      })
    },
    compareCompany (val, type) {
      let that = this
      let params = {
        comType: type,
        paramValue1: +type === 1 ? this.companyA : val,
        paramValue2: +type === 1 ? this.companyB : ''
      }
      this[this.COMPANY[type - 1]] = {
        xData: [],
        yData: []
      }
      if (+type === 1 && (!params.paramValue1 || !params.paramValue2)) {
        return
      }

      let s = [{'monthOrYear': '2018-05', 'value': '80.7'},
        {'monthOrYear': '2019-05', 'value': '90'},
        {'monthOrYear': '2016-05', 'value': '60'}
      ]

      s.forEach(function (item) {
        that[that.COMPANY[type - 1]].xData.push(item.monthOrYear)
        that[that.COMPANY[type - 1]].yData.push(item.value)
      })
    },
    darw (id, xData, yData, xUnit, yUnit) {
      var idinit = echarts.init(document.getElementById(id))
      let option = {
        xAxis: {
          name: xUnit,
          type: 'category',
          nameRotate: yUnit > 0 ? 30 : 0,
          nameGap: yUnit > 0 ? 0 : 15,
          nameLocation: 'end',
          nameTextStyle: {
            color: '#000'
          },
          axisTick: {
            show: false
          },
          axisLine: {
            show: true,
            lineStyle: {
              color: '#ccc',
              width: 2
            }
          },
          axisLabel: {
            color: '#000'
          },
          data: xData
        },
        tooltip: {
          trigger: 'axis'
        },
        yAxis: {
          name: yUnit > 0 ? '吨 标煤/万元' : '吨 标煤',
          type: 'value',
          nameRotate: yUnit > 0 ? 30 : 0,
          nameGap: yUnit > 0 ? 0 : 15,
          nameLocation: 'end',
          nameTextStyle: {
            color: '#000',
            fontSize: 14,
            padding: [0, 0, 10, 0]
          },
          splitLine: {
            show: false
          },
          axisLabel: {
            formatter: function () {
              return ''
            }
          },
          axisTick: {
            show: false
          },
          axisLine: {
            show: true,
            lineStyle: {
              color: '#ccc',
              width: 2
            }
          }
        },
        series: [
          {
            name: '标煤',
            type: 'bar',
            barWidth: 30,
            itemStyle: {
              normal: {
                color: function (params) {
                  var colorList = ['#665aa4', '#fc430b', '#3dc95d']
                  return colorList[params.dataIndex]
                }
              },
              // 鼠标悬停时：
              emphasis: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            },
            label: {
              normal: {
                show: true,
                position: 'top'
              }
            },
            data: yData
          }
        ]
      }
      idinit.setOption(option)
    }
  }
}
</script>

<style lang="stylus">
  .barHeader {
    height: 100px;
    line-height: 100px;
    font-size: 20px;
    background: #666;
    color: #fff;
  }
  .barCompareContainer
    display: flex
    justify-content: space-around
    flex-wrap: wrap
    .compareItem
      min-width: 400px
      max-width: 420px
      min-height: 360px
      padding: 20px 5px
      box-sizing: border-box
      border: 1px #ccc solid
      text-align: center
      position: relative
      &:empty
        height: 0
        min-height: 0px
        border: none
      h3
        margin-top: 0px
        margin-bottom: 0px
        padding: 0px
      .companybarPosition
        margin-top: 10px
        font-size: 14px
        z-index: 2
      .barPosition
        position: absolute
        right: 5px
        top: 48px
        font-size: 14px
        z-index: 2
</style>
